<template>
  <h2>v-if & props</h2>
  <div class="note">
    <p>1. props 结合 v-if 选择需要的板块/代码块</p>
    <p>2. 代码过于繁复，且有其它需求的时候每次都要新增</p>
    <p>3. 不推荐使用，建议代码使用率高而需要修改某个东西的时候使用`插槽`</p>
    <p>4. 代码复用的部分建议用`template`标签包裹</p>
  </div>

  <div class="test">
    <template v-if="props.isZhendao === 1">不要再堕落了~</template>

    <template v-if="props.isZhendao === 2"> 不要振刀 </template>

    <template v-if="props.isZhendao === 3"> 我就要振刀 </template>

    <template v-if="props.isZhendao === 4"> 我要修大坝 </template>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  isZhendao: number
}>()
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
